{extend name="public/layout"}
{block name="head"}
<style>
    html {
        height: 100%;
    }

    body {
        background: url("/luck/images/p6.png") #c72323;
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center 0;
        padding-bottom: 0.5rem;
    }

    .title-img {
        width: 4.4159999999999995rem;
        margin-top: 0.24rem;
    }

    .rule-img {
        height: 0.384rem;
    }

    .center-img {
        width: 6.1056rem;
    }

    .cursor-img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2.6304000000000003rem;
        margin-left: -1.1rem;
        margin-top: -1.135rem;
    }

    .reward-img {
        position: absolute;
        top: 4.396800000000001rem;
        left: 5.0976rem;
        width: 1.056rem;
    }

    .zj-img {
        width: 6.1056rem;
        margin-top: 0.48rem;
    }

    .records-list {
        background-color: #aa0909;
        padding: 0 0.192rem 0.192rem 0.192rem;
        width: 6.6240000000000006rem;
        margin: 0 auto;
        margin-top: 0.2rem;
    }

    .avatar {
        width: 0.96rem;
        height: 0.96rem;
    }

    .info {
        color: #f9c401;
        font-size: 0.23040000000000002rem;
    }

    .info-title {
        color: #fff;
    }

    .info-box {
        padding-left: 0.192rem;
        line-height: 1.8em;
    }

    .records-list .container > div {
        border-bottom: 1px dashed #ffff00;
        padding-bottom: 0.192rem;
        padding-top: 0.192rem;
    }

    .my_reward_img {
        width: 100%;
    }

    #my_reward {
        width: 5rem;
        margin-left: -2.5rem;
        position: fixed;
        left: 50%;
        top: 3.1696rem;
        display: none;
    }

    #my_rewards {
        width: 6rem;
        margin-left: -3rem;
        position: fixed;
        left: 50%;
        top: 2rem;
        display: none;
    }

    .reward-dialog {
        width: 100%;
    }

    .close-btn {
        position: absolute;
        right: -0.4rem;
        top: -0.4rem;
        width: 0.4032rem;
    }

    #masker {
        background-color: rgba(0, 0, 0, 0.3);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: none;
    }

    #masker2 {
        background-color: rgba(0, 0, 0, 0.3);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: none;
    }

    .gift-img {
        width: 1.5rem;
        position: absolute;
        right: 0.7rem;
        top: 1.15rem;
    }

    .dialog-title {
        position: absolute;
        left: 0;
        right: 0;
        top: 0.23rem;
        color: #0a0a0a;
        font-size: 0.3rem;
        text-align: center;
    }

    .dialog-info {
        position: absolute;
        left: 0.8rem;
        top: 1.2rem;
        width: 1.6rem;
        font-size: 0.25rem;
    }

    .dialog-info span {
        color: #ff6f3c;
    }

    .dialog-ok {
        background-color: #fdc719;
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        border-radius: 2px;
        color: #9d1a03;
        position: absolute;
        bottom: 27px;
        left: 20px;
        right: 20px;

    }

    .list-data {
        position: absolute;
        left: 0;
        right: 0;
        top: 2.3rem;
        overflow: scroll;
        height: 2.7rem;
    }

    .list-data table {
        width: 100%;
        color: #9d1a03;
    }

    .list-data th {
        border-bottom: 1px solid #f7d2be;
        padding-bottom: 0.096rem;
    }

    .list-data td {
        border-bottom: 1px solid #f7d2be;
        text-align: center;
        padding: 0.096rem 0;
    }

    #my_rewards .close-btn {
        top: 0.5rem;
        right: -0.2rem;
    }

    #start_btn, #big_wheel {
        -webkit-transition: all 4s cubic-bezier(1, 0.00001, 0.00001, 1);
        transition: all 4s cubic-bezier(1, 0.00001, 0.00001, 1);
    }

    .dialog {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        position: fixed;
        top: 0;
        z-index: 1000;
        font-size: 1.2em;
        display: none;
    }

    .dialog .d-main {
        width: 100%;
        overflow: hidden;
        padding: 16px 8%;
        position: absolute;
        top: 20%;
        background: #bc1616;
    }

    .dialog .d-main p {
        width: 100%;
        line-height: 22px;
        color: #fff;
    }

    .dialog .d-main .btn-w {
        width: 100%;
        overflow: hidden;
        margin-top: 20px;
    }

    .dialog .d-main .btn-w a.btn {
        width: 38%;
        height: 36px;
        line-height: 36px;
        color: #960b0b;
        background: #ffaa30;
        display: inline-block;
        text-align: center;
    }

    .dialog .d-main .btn-w a.btn:first-child {
        margin-right: 20%;
    }
</style>
{/block}
{block name="content"}
<div class="dialog" id="no_reward">
    <div class="d-main">
        <p>很遗憾没有中奖，谢谢参与!</p>
        <div class="btn-w">
            <a class="btn bt_close" href="javascript:;" onclick="$(this).closest('.dialog').hide()">确定</a>
        </div>
    </div>
</div>
<div class="dialog" id="no_reward2">
    <div class="d-main">
        <p>很遗憾您没有抽奖机会了，谢谢参与!</p>
        <div class="btn-w">
            <a class="btn bt_close" href="javascript:;" onclick="$(this).closest('.dialog').hide()">确定</a>
        </div>
    </div>
</div>

<div class="text-center">
    <img src="/luck/images/p2.png" alt="" class="title-img">
</div>
<div class="text-center" style="margin-top:-0.25rem;">
    <img src="/luck/images/p5.png" alt="" class="rule-img">
</div>
<div class="text-center rel" style="margin-top: 0.1rem;">
    <img src="/luck/images/p4.png" alt="" class="center-img" id="big_wheel">
    <img src="/luck/images/p3.png" alt="" class="cursor-img" id="start_btn">
    <img src="/luck/images/p1.png" alt="" class="reward-img" id="myreward-btn">
</div>
<div class="text-center">
    <img src="/luck/images/p7.png" alt="" class="zj-img">
</div>

<div class="records-list" id="record_list">
    <div class="container">
        {volist name="prizes" id="vo"}
        <div class="flex">
            <img src="{$vo.avatar}" alt="" class="avatar">
            <div class="flex-con info-box">
                <div class="info-title">
                    {$vo.nickname}
                </div>
                <div class="info">
                    在{:_timeformat3($vo.luck_time)}中了{$vo.prize_type==1?'珊瑚命名权':'爱心小礼物'}
                </div>
            </div>
        </div>
        {/volist}
    </div>

</div>
<div id="masker">

</div>
<div id="masker2">

</div>
<div id="my_rewards">
    <img src="/luck/images/dialog.png" alt="" class="reward-dialog">
    <img src="/luck/images/close.png" alt="" class="close-btn">
    <div class="list-data">
        <table>
            <thead>
            <tr>
                <th>奖项</th>
                <th>中奖时间</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody id="goods_list">
            {volist name="myprizes" id="vo"}
            <tr>
                <td>{$vo.prize_type==1?'珊瑚命名权':'爱心小礼物'}</td>
                <td>{$vo.luck_time}</td>
                <td>{$vo.status?'已发货':'未发货'}</td>
            </tr>
            {/volist}
            </tbody>

        </table>
    </div>
</div>
<div id="my_reward">
    <div class="dialog-title" id="reward_title">
        爱心小礼物
    </div>
    <div class="dialog-info" id="reward_msg">
        恭喜你！获得
        <span>爱心小礼物</span>
        一份
    </div>
    <div class="dialog-ok">
        确定
    </div>
    <img src="/luck/images/reward.png" alt="" class="my_reward_img">
    <img src="/luck/images/close.png" alt="" class="close-btn">
    <img src="/luck/images/gift.png" alt="" class="gift-img">
</div>
<script src="/luck/js/jquery-1.8.0.min.js"></script>
<script src="/luck/js/jquery.SuperSlide.2.1.1.source.js"></script>

<script>
    jQuery("#record_list")
        .slide( {mainCell:"div.container",autoPage:true,effect:'topLoop',
            autoPlay:true,scroll:1,vis:3,easing:'swing',delayTime:1000, interTime:2000, pnLoop:true});
    $('#masker').on('click', function () {
        $(this).hide();
        $('#my_reward').hide();
    });
    $('#my_reward').on('click', '.dialog-ok,.close-btn', function () {
        $('#masker').click();
    });
    $('#masker2').on('click', function () {
        $(this).hide();
        $('#my_rewards').hide();
    });
    $('#my_rewards').on('click', '.dialog-ok,.close-btn', function () {
        $('#masker2').click();
    });
    $('#myreward-btn').on('click', function () {
        $('#masker2').show();
        $('#my_rewards').show();
    });
    var preRan = 0;
    var startRan = 7200;

    var is_raning = false;
    $('#start_btn').on('click', function () {
        if (is_raning) {
            return;
        }
        $.get("{:U('startGame')}", function (data) {
            if (data.status == 1) { //表示成功
                var info = data.info;
                var ran = startRan + preRan + info.ran;
                is_raning = true;
                $('#big_wheel').css('transform', 'rotate(' + ran + 'deg)');
                preRan = ran - info.ran;
                var result = info.info;
                setTimeout(function () {
                    is_raning = false;
                    if (result == 0) {
                        $('#no_reward').show();
                    } else if (result == 2) { // 爱心小礼物
                        $('#reward_msg').html(' 恭喜你！获得<span>爱心小礼物</span>一份');
                        $('#reward_title').text('爱心小礼物');
                        $('#my_reward').show();
                        $('#masker').show();
                        $('#goods_list').prepend('<tr>' +
                            '<td>爱心小礼物</td>' +
                            '<td>' + info.time + '</td>' +
                            '<td>未发货</td></tr>');
                    } else if (result == 1) { //珊瑚
                        $('#reward_msg').html(' 恭喜你！获得<span>珊瑚命名权</span>一株');
                        $('#reward_title').text('珊瑚命名权');
                        $('#my_reward').show();
                        $('#masker').show();
                        $('#goods_list').prepend('<tr>' +
                            '<td>珊瑚命名权</td>' +
                            '<td>' + info.time + '</td>' +
                            '<td>已发货</td></tr>');
                    }
                }, 4500);
            } else {
                $('#no_reward2').show();
            }
        }, 'json');

    });
</script>

{/block}